import React ,{useRef}from 'react';
import {useNavigate} from "react-router-dom";
import { Dropdown , Modal, message } from 'antd';
import type { MenuProps } from 'antd';
import {UserOutlined, FormOutlined, LogoutOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
import {connect} from "react-redux";
import {setToken,setUserInfo} from '@/redux/modules/global/action'

import Editpwd from '@/components/Editpwd'

import '@/layouts/components/Head/index.less'
import avatar from "@/assets/images/avatar.png";

import '@/layouts/components/Head/index.less'
interface ModalProps{
    showModal:(params:{name:string,age:number})=>void
}
function AvatarArea(props:any) {
    const EditpwdRef = useRef<ModalProps>(null)
    let navigate = useNavigate()
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <span>
                    <UserOutlined />
                    <span className="ml6">个人信息</span>
                </span>
            ),
            onClick:()=>{
                navigate('/userInfo')
            }
        },
        {
            key: '2',
            label: (
               <span>
                   <FormOutlined />
                   <span className="ml6">修改密码</span>
               </span>
            ),
            onClick:()=>{
                EditpwdRef.current?.showModal({name:'张三',age:18})
            }
        },
        {
            key: '3',
            label: (
                <span>
                    <LogoutOutlined />
                    <span className="ml6">退出登录</span>
                </span>
            ),
            onClick:()=>{
                loginOut()
            }
        },
    ];

    const loginOut = () => {
        Modal.confirm({
            title: '温馨提示',
            icon: <ExclamationCircleOutlined />,
            content: '是否确认退出登录？',
            okText: '确认',
            cancelText: '取消',
            onOk:() => {
                setToken("");
                setUserInfo({})
                message.success("退出登录成功！");
                navigate("/login");
            }
        });
    }

    return (
        <div>
            <Dropdown menu={{ items }} placement="bottom" arrow trigger={['click']}>
                <div className="avatar" id="id_avatar_area">
                    <img src={avatar} alt=""/>
                </div>
            </Dropdown>
            <Editpwd initRef={EditpwdRef}/>
        </div>
    );
}

const mapStateToProps = (state:any)=> state.global
const mapDispatchToProps = {setToken,setUserInfo}
export default connect(mapStateToProps,mapDispatchToProps)(AvatarArea);
